/* 为文档添加一个DOM加载完成的事件，相当于是网页初始化 */
document.addEventListener('DOMContentLoaded', function() {
    initNav()
    initBanner()
    initMoreTab()
    initSiteIconChange()
    initRightToolsScroll()
})

/**
 * 初始化白色导航区域中超链接的鼠标事件
 */
function initNav() {
    let lis = document.querySelectorAll('.nav-bar-left>li')
    let uls = document.querySelectorAll('.nav-bar-left>aside ul')
    /* 为每一个li设置一个鼠标移入事件 */
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('mouseover', function() {
            // 全部变成全透明
            for (let j = 0; j < uls.length; j++) {
                uls[j].style.opacity = 0
            }
            // 当前变成不透明
            if (i > uls.length - 1) {
                i = uls.length - 1
            }
            uls[i].style.opacity = 1
        })
    }
}

/**
 * 初始化智能穿戴区域的tab选项
 */
function initMoreTab() {
    // 所有的a标签
    let as = document.querySelectorAll('.smart-wear>.title>.more>a')
    // 所有的ul
    let uls = document.querySelectorAll('.smart-wear>.goods-box>ul.goods-box-right')
    uls.forEach(ul => ul.style.display = 'none')
    uls[0].style.display = 'block'
    for (let i = 0; i < as.length; i++) {
        as[i].addEventListener('mouseover', function() {
            // 隐藏所有的ul标签
            uls.forEach(ul => ul.style.display = 'none')
            // 当前对应的ul标签显示
            uls[i].style.display = 'block'
            // 所有的a标签移除class:tab-active
            /*for (let j = 0; j < as.length; j++) {
                as[j].classList.remove('tab-active')
            }*/
            as.forEach(e => e.classList.remove('tab-active'))
            // 为当前添加class:tab-active
            as[i].classList.add('tab-active')
        })
    }
}

/**
 * 初始化底部图标的变化过程
 */
function initSiteIconChange() {
    let icons = document.querySelectorAll('.site .site-icon>a>img.link-img')
    icons[0].style.display = 'inline'
    icons[1].style.display = 'none'
    let index = 0
    setInterval(function () {
        // 第一次执行已经是2秒之后
        if (index % 2 === 0) {
            icons[0].style.display = 'none'
            icons[1].style.display = 'inline'
        } else {
            icons[0].style.display = 'inline'
            icons[1].style.display = 'none'
        }
        index ++
    }, 2000)
}

/**
 * 初始化右侧工具栏的滚动过程
 */
function initRightToolsScroll() {
    // 获取回顶部的DOM对象
    let toTop = document.querySelector('.right-tools>.return-top');
    window.addEventListener('scroll', function() {
        // 获取当前网页距离初始顶部的距离
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if (scrollTop >= 1280) {
            toTop.style.display = 'block'
        } else {
            toTop.style.display = 'none'
        }
    })
}